<template>
	<div class="announcement_detail_wrapper" v-loading="loading">
		<el-page-header @back="handleBackList()" content="公告详情"></el-page-header>
		<div class="el-page-content">
			<div class="announcement_detail_content">
				<div class="header">
					<h1>{{ detailData.title }}</h1>
					<p>
						<span>作者：{{ detailData.createName }}</span>
						<span>时间：{{ detailData.createTime }}</span>
					</p>
				</div>
				<div class="content" v-html="detailData.content"></div>
				<el-table :data="attachListData" border v-if="attachListData.length > 0">
					<el-table-column prop="oldName" label="附件文件" min-width="360"></el-table-column>
					<el-table-column prop="attrSuffixStr" label="文件后缀" min-width="120"></el-table-column>
					<el-table-column label="操作" width="54">
						<template slot-scope="{ row }">
							<el-button class="btn" type="text" @click="handleDownloadFile(row.id)">下载</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-backtop target=".el-page-content"></el-backtop>
		</div>
	</div>
</template>

<script>
import { attachDownload } from '@/api/global';
import { queryJournalism } from '@/api/platform/tbSysJournalism';
export default {
	data() {
		return {
			loading: false,
			detailData: {}
		};
	},
	computed: {
		dataId() {
			return this.$route.params.id;
		},
		attachListData() {
			return this.detailData.attrList || [];
		}
	},
	watch: {
		dataId: {
			handler(id) {
				this.loading = true;
				this.getJournalismDetail(id);
			},
			immediate: true
		}
	},
	methods: {
		//获取公告详情
		async getJournalismDetail(id) {
			let params = { id, isRecord: '2' };
			let result = await queryJournalism(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.detailData = this.$detailData(result.data);
			}
		},

		handleBackList() {
			this.$router.back();
		},

		async handleDownloadFile(id) {
			let baseUrl = process.env.VUE_APP_BASEURL;
			window.location.href = `${baseUrl}tbSysAttachment/download/${id}`;
		}
	}
};
</script>

<style lang="scss" scoped>
.announcement_detail_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	.el-page-header {
		padding: 12px 16px;
		border-bottom: solid 1px #e4e7ed;
	}
	.el-page-content {
		flex: 1;
		overflow: hidden;
		overflow-y: auto;
		background-color: #e4e7ed;
	}
}
.announcement_detail_content::v-deep {
	padding: 32px 16px 16px;
	max-width: 1200px;
	min-height: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	background-color: #fff;
	.header {
		text-align: center;
		padding-bottom: 16px;
		border-bottom: solid 1px #f2f6fc;
		h1 {
			font-size: 20px;
			line-height: 30px;
			margin-bottom: 16px;
		}
		span {
			color: #909399;
			margin: 0 16px;
		}
	}
	.content {
		font-size: 16px;
		line-height: 2em;
		padding-top: 16px;
		color: #606266;
		p {
			text-indent: 2em;
		}
	}
	.el-table {
		margin-top: 16px;
	}
	.el-table__cell {
		padding: 8px 0;
	}
	.cell {
		line-height: 22px;
	}
	.el-button.btn {
		padding: 3px 0;
	}
}
</style>
